import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {createMuiTheme, Grid} from "@material-ui/core";
import Paper from "@material-ui/core/Paper";
import {makeStyles, ThemeProvider} from "@material-ui/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import {darkTheme, lightTheme} from "../assets/js/themeEditor";
import {themeWebsite} from "../assets/js/themeWebsite";
import EditorHeader from "./App/Editor/Common/EditorHeader/EditorHeader";
import Footer from "./App/Website/Footer/Footer";
import Header from "./App/Website/Header/Header";
import EditorFooter from "./App/Editor/Common/EditorFooter/EditorFooter";
import {setLightMode} from "../redux/reducers/commonSettings";
import Routes from "./Routes";

const useStyles = makeStyles({
  mainContainer: {
    position: "relative",
    minHeight: "100vh"
  },
  root: {
    display: "flex",
  },
})

export default function App() {
  const classes = useStyles();
  const dispatch = useDispatch();
  const darkMode = useSelector((state) => state.commonSettings.darkMode);
  const login = !!localStorage.getItem('userToken');
  const darkBackground = "#212121";
  const whiteBackground = "#EFEFEF"

  useEffect(() => {
    dispatch(setLightMode(false));
  }, [dispatch, login])


  return (
    // Instantiate custom theme
    <ThemeProvider theme={login ? (createMuiTheme(darkMode ? darkTheme : lightTheme)) : themeWebsite}>
      <div className={classes.root}>
        <CssBaseline/>
        <Grid container direction="column">

          {/* Either EditorHeader or WebsiteHeader*/}
          {login ? (<EditorHeader/>) : <Header/>}

          <Paper style={darkMode ? ({backgroundColor: darkBackground}) : ({backgroundColor: whiteBackground})}>
            <Grid container className={classes.mainContainer}>
              <Routes/>
            </Grid>
          </Paper>

          {/* Footer */}
          {login ? <EditorFooter/> : <Footer/>}
        </Grid>
      </div>
    </ThemeProvider>
  );
}
